<template>
    <!-- 购物车数据展示组件 -->
    <el-table :data="cartData" style="width: 100%" border >
        <el-table-column prop="title" label="商品名称" width="180" align="center" />
        <el-table-column prop="price" label="商品价格" width="180" align="center" />
        <el-table-column prop="num" label="购买数量" width="180" align="center"/>
        <!-- 假设支付状态字段为 paymentStatus，可根据实际情况修改 -->
        <el-table-column prop="statue" label="支付状态" align="center">
            <template #default="scope">
                <span :style="{ color: getPaymentStatusColor(scope.row.statue) }">
                    {{ getPaymentStatusText(scope.row.statue) }}
                </span>
            </template>
        </el-table-column>
        <el-table-column label="订单操作" align="center">
            <template #default="scope">
                <el-button v-if="scope.row.statue == 1" type="primary" size="small" @click="goToPay(scope.row)">去支付</el-button>
                <el-button v-if="scope.row.statue == 1" type="danger" size="small" @click="cancelOrder(scope.row)">取消</el-button>
                <el-button v-if="scope.row.statue == 2" type="info" size="small" @click="viewOrder(scope.row)">查看</el-button>
                <el-button v-if="scope.row.statue == 2" type="danger" size="small" @click="deleteOrder(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios';
import { ElMessage } from 'element-plus';

const cartData = ref([])

// 获取购物车数据
const getCartdata = async () => {
    try {
        const res = await axios.get('/api/goods/cartData')
        cartData.value = res.data;
    } catch (error) {
        console.error('获取购物车数据失败:', error);
    }
}

// 根据支付状态返回文本
const getPaymentStatusText = (status) => {
    if (status == 1) {
        return '未支付';
    } else if (status == 2) {
        return '已支付';
    }
    return '未知状态';
}

// 根据支付状态返回颜色
const getPaymentStatusColor = (status) => {
    if (status == 1) {
        return 'red';
    } else if (status == 2) {
        return 'green';
    }
    return 'black';
}

// 去支付方法
const goToPay = async (order) => {
    try {
        // 调用更新订单状态的 API
        await axios.put(`/api/goods/updateOrderStatus/${order.id}`);
        ElMessage.success(`订单 ${order.title} 已支付`);
        // 重新获取购物车数据
        await getCartdata();
    } catch (error) {
        console.error('支付失败:', error);
        ElMessage.error('支付失败，请稍后重试');
    }
}

// 取消订单方法
const cancelOrder = async (order) => {
    try {
        // 调用取消订单的 API 请求
        await axios.delete(`/api/goods/cancelOrder/${order.id}`);
        ElMessage.success(`未支付订单 ${order.title} 已取消`);
        // 重新获取购物车数据
        await getCartdata();
    } catch (error) {
        console.error('取消订单失败:', error);
        ElMessage.error('取消订单失败，请稍后重试');
    }
}

// 查看订单方法
const viewOrder = (order) => {
    // 这里可以添加查看订单详情的逻辑，例如弹出详情对话框
    ElMessage.info(`查看订单：${order.title}`);
}

// 删除订单方法
const deleteOrder = async (order) => {
    try {
        // 调用删除订单的 API 请求
        await axios.delete(`/api/goods/deleteOrder/${order.id}`);
        ElMessage.success(`订单 ${order.title} 已删除`);
        // 重新获取购物车数据
        await getCartdata();
    } catch (error) {
        console.error('删除订单失败:', error);
        ElMessage.error('删除订单失败，请稍后重试');
    }
}

onMounted(() => {
    getCartdata()
})
</script>

<style scoped>

</style>